1 files changed, 67 insertions, 0 deletions
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
new file mode 100644
index 0000000..f42f5c9
--- /dev/null
+++ b/src/pages/blog/[slug].astro
@@ -0,0 +1,67 @@
+---
+import { getCollection, getEntry } from 'astro:content';
+import StandardLayout from '../../layouts/StandardLayout.astro';
+
+// Define the props type
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+// Get the blog post data
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+// Format the publication date
+const formattedDate = new Date(entry.data.pubDate).toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+});
+---
+
+<StandardLayout title={entry.data.title} description={entry.data.description}>
+  <article class="max-w-3xl mx-auto">
+    <div class="mb-8">
+      <a href="/blog" class="text-blue-600 hover:text-blue-800 flex items-center">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+        </svg>
+        Back to Blog
+      </a>
+    </div>
+
+    {entry.data.image && (
+      <img 
+        src={entry.data.image} 
+        alt={entry.data.title} 
+        class="w-full h-64 md:h-96 object-cover rounded-lg shadow-md mb-8"
+      />
+    )}
+
+    <h1 class="text-4xl font-bold text-gray-900 mb-4">{entry.data.title}</h1>
+    
+    <div class="flex items-center text-gray-600 mb-8">
+      <span>By {entry.data.author}</span>
+      <span class="mx-2">•</span>
+      <time datetime={entry.data.pubDate.toISOString()}>{formattedDate}</time>
+    </div>
+
+    {entry.data.tags && entry.data.tags.length > 0 && (
+      <div class="flex flex-wrap gap-2 mb-8">
+        {entry.data.tags.map(tag => (
+          <span class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full">
+            {tag}
+          </span>
+        ))}
+      </div>
+    )}
+
+    <div class="prose prose-lg max-w-none">
+      <Content />
+    </div>
+  </article>
+</StandardLayout>